Single Panel

The Single Panel widget enables you to embed a chart, metric, or summary panel that has already been created in Qrvey Composer.

Note: Unlike Dashboards, Single Panel widgets do not include the full set of dashboard functionality such as global filters. When embedding a Single Panel widet, only the visualization itself is rendered.

Embeddable Sample

The following sample demonstrates how to quickly embed a single panel in your system.

Important: This example is for testing purposes only.

• API Key: In production, your API key must never be exposed in the UI. It should only be used in backend-to-backend communication.
• Minimal Config: The sample uses the minimum set of properties needed for quick testing. Production deployments can require additional properties.

<an-panel config="singlePanelConfig"></an-panel>

<!-- Widget's Configuration Object -->
<script>
var singlePanelConfig = {
   "apiKey": "<YOUR_PRIVATE_API_KEY>",   // Testing only. Do not expose in production.
   "appId": "<APP_ID>",
   "domain": "https://<YOUR_QRVEY_DOMAIN>",
   "userId": "<USER_ID>",
   "qrveyId": "<DATASET_ID>",            // Represents the dataset ID
   "type": "CHART",                      // Can also be "METRIC" or "SUMMARY"
   "chartId": "<CHART_ID>"               // Use metricId if type=METRIC, summaryId if type=SUMMARY
}
</script>

<!-- Widget's Launchers -->
<script type="module" src="<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.js"></script>

Production Deployment

When deploying to production:

• Use a qvToken instead of an apiKey.
• Ensure appId, userId, and qrveyId are passed by means of the token, not hard-coded.
• clientId, orgId, and orgs are not required for rendering the widget, but can be provided when you want Single Panel widget to act as a gateway for other components (such as Download Manager, Export Data modal, Subscriptions, or personalization).
• Configure additional properties such as panel, featurePermission, and i18n as needed.
• Keep the API key securely stored on the server side only.

Configuration Object

Property	Type	Required	qvToken Support	Description
domain	String	Yes	No	Qrvey instance URL. Example: https://example.qrvey.com.
qvToken	String	Yes (if apiKey is not provided)	-----	Encrypted token used for secure authentication. Used in production to securely pass all required parameters. Cannot be used with apiKey.
apiKey	String	Yes (if qvToken is not provided)	No	Secret token for accessing the application. Caution: For testing only; do not use in production UI. Cannot be used with qvToken .
appId	String	Yes	Yes	ID of the Qrvey application that contains the chart, metric, or summary panel.
userId	String	Yes (if not in session cookie)	Yes	ID of the Qrvey Composer user that owns the application being embedded. Alternatively, it can be passed in a Qrvey session cookie.
qrveyId	String	Yes	No	Represents the dataset ID to be used in the panel.
type	String	Yes	No	Defines the panel type. Options: CHART, SUMMARY, or METRIC.
chartId	String	Yes if type is CHART	No	ID of the chart to display.
metricId	String	Yes if type is METRIC	No	ID of the metric to display.
summaryId	String	Yes if type is SUMMARY	No	ID of the summary panel to display.
clientId	String	No	Yes	Not required for rendering. Unique identifier for the tenant end user. Used for personalization and passed to other components such as Download Manager or Export modal.
orgId	String	No	Yes	Not required for rendering. Organization ID for the end user. Used to pass organization context to other components.
orgs	Object Array	No	Only	Not required for rendering. Defines users and roles grouped by organization. Used to enable sharing/subscription features in other components.
email	String	No (required for scheduling/subscriptions)	Only	Email of the clientId user. Enables scheduling of exports/subscriptions.
panel	Object	No	No	Allows configuration of panel features (header, body, footer, styles, and so on). For more information, Panel Object.
userFilters	Object	No	Yes	Collection of custom filters applied to the panel visualization. For more information, see User Filters.
timezone	String	No	Yes	Timezone offset applied to dates. For more information, see Configuring Time Zone Settings.
i18n	Object	No	No	Defines language for UI text and dataset columns. Supports internationalization. For more information, see i18n Object.
themeId	String	No	No	Theme ID to apply a pre-defined theme. For more information, see Accessing a Theme Programmatically.
featurePermission	Object	No	No	Enables you to create a customized view by showing and hiding specific features. For more information, see Feature Permission Object.
customTokens	Object	No	No	Adds personalization with custom tooltips. For more information, see Custom Tokens Example: { "my_header": "Tooltip Header" }.

Orgs

For full details on how orgs work, see Organizations, Ownership, and Subscriptions.

Property	Type	Description
orgId	String	The ID of the organization to which the roles and users are defined next. To list the roles and users in subscribe, this ID should correspond to the user in the session orgId.
users	Array	An object/array of users to be listed in the subscribe modal. This is not for the current user. Adjust clientId and email accordingly.
users.clientId	String	Client ID of the user.
users.email	String	Email address of the user.

Example:

const orgs = [
  {
      orgId: 'ORG_ID',
      users: [
        {
          clientId: 'CLIENT_ID',
          email: 'EMAIL'
        },
        {
          clientId: 'CLIENT_ID2',
          email: 'EMAIL2'
        }
      ]
  }
]

i18n

For more information, see Internationalization, Step by Step.

Property	Type	Required	Description
lang	String	Yes	Language to use for the UI (example: "es").
locale	String	No	Locale code to use for date and number formatting (Example: "es-ES").

Timezone

Property	Type	Required	Description
timezone.offset	String.	No	Specifies the timezone offset. Accepted formats: +03:00, -03, and so on.

Panel

Property	Type	Required	Description
panel.header	Object	No	Panel header options object.
panel.header.visible	Boolean	No	Determines if the panel header is visible. Defaults to true.
panel.header.draggable	Boolean	No	Used by Custom View and Metric View panels. If true, the panel header has an icon to drag and drop the panel. Defaults to false in embedded widgets.
panel.header.filter	Boolean	No	Determines if the panel header has a filter button to open the Filter Modal widget. Defaults to false in embedded widgets.
panel.header.menu	Array/Boolean	No	If it's an array, the panel header displays the options passed through the array. If the value is true, the panel header displays a default menu. Accepted values for the array: EDIT, DOWNLOAD, DUPLICATE, SIZE and DELETE. (Note: SIZE is used only by Custom View panels).
panel.header.fit_panel	Boolean	No	Set to true if "fit to panel" button is enabled (false by default).
panel.header.title_prefix	String	No	Sets a prefix for the title of the panel.
panel.header.externalDownload	Array	No	Set of values to allow external download for defined formats. Used by the Dashboard. Accepted Values: CSV.
panel.header.sorting	Boolean	No	, Determines if sorting button is show in the panel header.
panel.header.chartSelection	Boolean	No	Allow the user to change the chart type.
panel.header.columnReplacement	Boolean	No	Allow the user to select and change the columns from the self-service option.
panel.header.columnAggregation	Boolean	No	Allow the user to select and change the columns aggregates directly from the self-service option.
panel.header.dateGrouping	Object	No	Allow the user to change date grouping, for the cases of having a Date type column, their date grouping (shown below). All of them are accessible under Column settings icon.
panel.body	Object	No	Panel body options object.
panel.body.popup	Object.	No	Panel body popup options object. Used to show Filter By, See Data and Drill-Down options.
panel.body.popup.items	Array.	No	Set of options to show on the popup. For more information, see panel.body.popup.items properties.
panel.body.popup.items[itemIndex]	Object	No	Popup item options object to use in panel.body.popup.items array.
panel.body.popup.items[itemIndex].label	String	No	Option name. Required for this array.
panel.body.popup.items[itemIndex].action	Function	No	Custom callback function.
panel.footer	Object.	No	Panel footer options object.
panel.footer.visible	Boolean.	No	Determines if a panel footer is visible. Defaults to false.
panel.styles	Object.	No	Styles options object. These properties extend the current theme.
panel.styles.chartsTitle	String.	No	Set the charts title color using a hex value.
panel.styles.chartsFontFamily	String	No	Set the charts font family.
panel.styles.axisDataLabels	String	No	Set axis labels color in charts.
panel.styles.dataLabels	String.	No	Sets a hex color for data labels in charts.
panel.styles.valuesMain	String	No	Sets a hex color for axis ticks values in charts.
panel.styles.chartsLegends	String	No	Sets a hex color for charts legends labels.
panel.styles.chartsTooltips	String	No	Set a hex color for charts tooltips.
panel.styles.tableHeaderFont	String	No	Sets color for table header texts.
panel.styles.chartsMain	String	No	Sets color for chart data points like bars, symbols and lines.
panel.styles.themePalette	Array	No	Sets up to 20 hex color values for chart data points like bars, symbols and lines.

dateGrouping

// example
dategrouping: {
  year: true,
  quarter: true,
  month: true,
  week: true,
  quarter_only: true,
  month_only: true,
  day_only: true,
  advancedGrouping: {
    day: true,
    hour: true,
    minute: true,
    second: true,
    hour_only: true,
    minute_only: true,
    second_only: true
  }
}

panel.body.popup.items

Accepted array items format:

let item = {
  label: '<popup_item>',              // Required
  action: customCallbackFunction(),   // Optional
  customdrills: <Array>               // Optional
}

Example: [{ label: 'SEEDATA' }, { label: 'FILTERBY' }, { label: 'DRILLDOWN' }, { label: 'CUSTOMDRILL' }]

Feature Permission

Property	Type	Required	Description
downloads	Object	No	Hide the Export feature, which supports exporting charts, tables, dashboards, and reports to downloadable files (PDF, JPG, CSV, EXCEL, CSV SUMMARY). For single panel, contains hideSchedule.
downloads.hideSchedule	Boolean	No	If true, hides the Schedule option in the Export feature (default: false).
featurePermission.hideSubscription	Boolean	No	Hide the subscription option in the export modal.
featurePermission.hideSubscribeExternalUsers	Boolean	No	Disable the option of subscribing users outside of the organization.

Styles

The Single Panel Widget supports customization through CSS variables, allowing you to adapt the look and feel of dashboards to match your application’s design system. This includes control over fonts, colors, spacing, and other UI elements.

By overriding the available style variables, you can achieve a fully branded experience for end users without altering functionality. This is recommended to ensure consistency across embedded dashboards.

For the complete list of available style variables and examples of how to use them, see Customize Widgets Using CSS.